/*
 * @Author: your name
 * @Date: 2020-10-30 14:10:07
 * @LastEditTime: 2020-11-05 12:38:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /crowd-funding/src/components/pages/header/index.js
 */
import React, { useEffect, useRef, useState } from 'react'
import headerProjectionImg from './images/projection.png' // 头部底部阴影
import { HeaderTitle, TitleDate } from './headerTitle/index'
import ProductDesc from './productDesc/index'
import BottomBtn from '../../animate/BottomBtn'
import './index.scss'
import { useThrottleFn, useThrottle, useScroll } from 'ahooks'
import { useDispatch, useSelector } from 'react-redux'
import { get } from 'lodash'
import { jdVersionGTA916 } from '../../../utils/navigation'
import { isMinimumAndroidVersion } from '@/utils/ENV'

require('./../../../utils/requestAnimationFrame.js')

export default (props) => {
	const { contentRef, isSetNavFlag, statusHeight, navHeight } = props
	let top = 0
	if (!isMinimumAndroidVersion()) {
		const _scroll = useScroll(contentRef, (val) => val.top > 0 && val.top < 872)
		const debouncedScroll = useThrottle(_scroll, { wait: 0 })
		top = debouncedScroll.top
	}
	const imageData = useSelector((state) => state.imageData)
	const headerImage = get(imageData, 'headerImage', '')
	const dispatch = useDispatch()
	const modeBgRef = useRef()
	const modeRef = useRef()
	const lineRef = useRef()
	const mainPicRef = useRef()
	const textRef = useRef()

	const [showNavTitle, setShowNavTitle] = useState(false)
	let stage = null
	const scrollDom = useThrottleFn(
		() => {
			let moveDistance = 0
			if (top >= 0) {
				if (top >= 0 && top <= 20) {
					stage = window.requestAnimationFrame(() => {
						lineRef.current.style = 'transform: scaleY(0); opacity: 0;'
						modeBgRef.current.style = `opacity: 0`
						textRef.current.style = `opacity: 1`
						if (mainPicRef.current) {
							mainPicRef.current.style = 'transform: scale(1); opacity: 1;'
						}
					})
				} else if (top > 20 && top <= 30) {
					moveDistance = top - 20
					stage = window.requestAnimationFrame(() => {
						lineRef.current.style = `transform: scaleY(${
							moveDistance / 20
						}); opacity: ${moveDistance / 20};`
						if (mainPicRef.current) {
							mainPicRef.current.style = `transform: scale(${
								(500 - top) / 500
							}); opacity: 1;`
						}
					})
				} else if (top > 30 && top <= 60) {
					moveDistance = top - 30
					stage = window.requestAnimationFrame(() => {
						lineRef.current.style = `transform: scaleY(1); opacity: 1;`
						if (mainPicRef.current) {
							mainPicRef.current.style = `transform: scale(${
								(500 - top) / 500
							}); opacity: 1;`
						}
						modeBgRef.current.style = `opacity: ${moveDistance / 50}`
						modeRef.current.style = `opacity: ${moveDistance / 50}`
					})
				} else if (top > 60 && top <= 250) {
					moveDistance = top - 60
					stage = window.requestAnimationFrame(() => {
						lineRef.current.style = `transform: scaleY(1); opacity: 1;`
						if (mainPicRef.current) {
							mainPicRef.current.style = `transform: scale(${
								(500 - top) / 500
							}) translateY(${1.095 * top - 65.7}px); opacity: 1;`
						}
						modeBgRef.current.style = `opacity: 1`
						modeRef.current.style = `transform: rotateX(${
							0.375 * top - 21.25
						}deg) translateY(${(10 / 7) * top - 600 / 7}px) scale(${
							-0.005142857 * top + 1.648571428
						},${(-2 / 700) * top + 1 + 12 / 70});opacity: 1;`
					})
				} else if (top > 250 && top <= 330) {
					stage = window.requestAnimationFrame(() => {
						lineRef.current.style = `transform: scaleY(1); opacity: 1;`
						if (mainPicRef.current) {
							mainPicRef.current.style = `transform: scale(${
								(500 - top) / 500
							}) translateY(${0.875 * top - 6.25}px); opacity: ${-0.02 * top + 6.4};`
						}
						modeBgRef.current.style = `opacity: 1`
						modeRef.current.style = `transform: rotateX(${
							0.375 * 250 - 21.25
						}deg) translateY(${(10 / 7) * 250 - 600 / 7}px) scale(${
							-0.005142857 * 250 + 1.648571428
						},${(-2 / 700) * 250 + 1 + 12 / 70});opacity: 1;`
					})
				} else if (top > 330 && top <= 420) {
					stage = window.requestAnimationFrame(() => {
						lineRef.current.style = `transform: scaleY(1); opacity: 1;`
						if (mainPicRef.current) {
							mainPicRef.current.style = `transform: scale(${
								(500 - top) / 500
							}) translateY(${0.875 * top - 6.25}px); opacity: 0;`
						}
						modeBgRef.current.style = `opacity: 1`
						modeRef.current.style = `transform: rotateX(${
							0.375 * 250 - 21.25
						}deg) translateY(${(10 / 7) * 250 - 600 / 7}px) scale(${
							-0.005142857 * 250 + 1.648571428
						},${(-2 / 700) * 250 + 1 + 12 / 70});opacity: 1;`
					})
				} else {
				}
				if (top > 534) {
					setShowNavTitle(true)
				} else {
					setShowNavTitle(false)
				}
			}
		},
		{ wait: 10 }
	)
	useEffect(() => {
		dispatch({ type: 'save:top', payload: top })
		if (isMinimumAndroidVersion()) {
			return
		}
		scrollDom.run()
		return () => {
			scrollDom.cancel()
			window.cancelAnimationFrame(stage)
		}
	}, [top, isSetNavFlag, statusHeight])

	return (
		<div className="styleHeader">
			<div
				className="header-content"
				style={{
					paddingTop: navHeight + statusHeight,
				}}>
				{/* 滑动动画层 */}
				<div className="scroll-background">
					<div className="mode-bg" ref={modeBgRef}>
						<div className="transform-mode" ref={modeRef} />
					</div>
					<div className="bottom-line" ref={lineRef} />
				</div>
				{/* 返回 ，分析组件 */}
				{isSetNavFlag ? (
					<HeaderTitle statusHeight={statusHeight} showNavTitle={showNavTitle} />
				) : null}
				{/* 标题 */}
				{jdVersionGTA916 ? (
					<TitleDate navHeight={navHeight} statusHeight={statusHeight} />
				) : null}
				{headerImage ? (
					<div className="header-img-content">
						<img
							ref={mainPicRef}
							src={headerImage}
							alt=""
							key={headerImage}
							className={`headerImg ${top === 0 ? 'float-animation' : ''}`}
						/>
					</div>
				) : null}
				<div
					style={{
						background: `url(${headerProjectionImg}) no-repeat`,
						backgroundSize: '100% 100%',
					}}
					className="headerProjectionImg"
				/>
			</div>
			{/* 产品介绍 */}
			<ProductDesc ref={textRef} />
		</div>
	)
}
